<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }

        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }

        input {
            width: 50px;
        }

        .search {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="search">
        按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button
            class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button
            class="search-pro">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>


        </tbody>
    </table>
    <script>
        // 利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }, ];

        function rander(arr) { // 定义一个渲染函数
            let arr1 = [];
            arr.forEach(function (val) {
                let str = `
                <tr>
                <td>${val.id}</td>
                <td>${val.pname}</td>
                <td>${val.price}</td>
                </tr>
            `;
                arr1.push(str); // 拼接字符串,组成数组
            });
            document.querySelector("tbody").innerHTML = arr1.join(""); // join方法将数组转换成字符串
        };
        rander(data); // 调用渲染函数
        let search = document.querySelector(".search-price"); // 
        let pro = document.querySelector(".search-pro");
        let start = document.querySelector(".start");
        let end = document.querySelector(".end");
        let sname = document.querySelector(".product");
        search.addEventListener("click", function () { // 注册点击事件
            if (start.value.trim() === "" || end.value.trim() === "") return alert("请输入正确的查询信息"); // 判断内容是否为空
            let arr = data.filter(function (val) { // filter筛选符合条件的元素
                return val.price >= start.value && val.price <= end.value;
            });
            rander(arr); // 用新数组重新渲染页面
        });
        pro.addEventListener("click", function () { // 注册点击事件
            if (sname.value.trim() === "") return alert("请输入正确的查询信息"); // 判断输入内容是否为空
            let arr = []; // 因为用的some方法,其只会返回布尔值,需要定义一个空数组去接收value
            data.some(function (val) {
                if (val.pname.indexOf(sname.value) !== -1) {
                    arr.push(val); // 把符合条件的元素添加到空数组中
                    return true; // 返回true 结束循环
                }
            })
            rander(arr); // 用新数据渲染页面
        });
    </script>
</body>

</html>